<template>
    <div class="myhead">
        <h2>vue简单的记事本</h2>
        <input type="text" placeholder="请输入您想要做的事，按回车键确认" v-model.trim="todoValue" @keyup.enter="add"/>
    </div>
</template>

<script>
//import bus from '../../util/bus'
import { v4 as uuidv4 } from 'uuid'
export default {
    name: "myhead",
    data(){
        return{
            todoValue: ""
        }
    },
    methods: {
        // 按下回车键给List组件添加一条数据
        add(){
            if(!this.todoValue){
                return alert("输入的不能为空！")
            }
            //console.log(this.$bus)
            let todoArr={
                id:uuidv4(),
                todo:this.todoValue,
                isCheck: false,
                isEdit: true
            }
            console.log("发送过去的数据",todoArr)
            // 利用中央事件总线给List组件发送数据
            this.$bus.$emit('add',todoArr)
            this.todoValue = ''
        }
    }
}
</script>

<style scoped>
.myhead input{
    width: 100%;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius:0px;
    border:1px solid #ccc;
}
.myhead input:focus{
    border:1px solid #03a9f4;
    outline: none;
}
.myhead input::placeholder{
    color: #ccc;
}
</style>